<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="utf8">
<#if channel ??>
<#assign title = "#" + channel.name>
<#else>
<#assign title = "@" + friend>
</#if>
<title>${title}</title>
<style>
body{
color: #333;
font-family: arial;
font-size: 14px;
background: #EEE;
margin:0;
}
#chatPanel{width:100%;height:100%;overflow: hidden;}
#chatActions{position:fixed;bottom:0;left:0;width:100%;margin-bottom: 5px;}
#chatActions .chatInput {
width: 185px;
height: 20px;
margin: 0 10px 0 43px;
padding: 7px 10px 2px;
outline: none;
box-shadow: 1px 1px 2px #BBB inset;
background: #EEE;
border-radius: 2px;
border: 1px solid #BBB;
line-height: 1.2em;
resize: none;
font: 14px/1.5 Helvetica,"微软雅黑","黑体",Arial,Tahoma;
}
#chatActions a.chatSend {
position: absolute;
right: 5px;
bottom: 0;
display: block;
height: 28px;
width: 80px;
margin: 0px 1px 1px 0;
color: white;
text-align: center;
text-decoration: none;
border: 1px solid #29447E;
border-radius: 3px;
box-shadow: 0 1px 3px #D9D9D9;
text-shadow: 0 1px 1px #444;
background: #486CB4;
outline: none;
}
#chatActions a.chatSend b {
display: block;
border-radius: 3px;
font-size: 14px;
line-height: 28px;
border-top: 1px solid #8A9CC2;
text-shadow: 0 -1px 0 #4F739F;
text-align: center;
}
#chatPanel #chatView{
	margin-left: 5px;
}
#chatPanel #chatView .userSelf {
color: orange;
}
#chatPanel #chatView .userOther {
color: #0A7FFF;
}
#chatPanel #chatView .emotion{
height: 45px;
}
#chatPanel #chatView .message {padding-left: 10px;}
.comm-tag a.tag-red {
background-color: #FF8D81;
color: white;
}
.comm-tag a {
display: inline-block;
border: 1px #DDD solid;
border-radius: 4px;
-webkit-border-radius: 4px;
font-size: 12px;
color: #666;
background-color: white;
height: 24px;
line-height: 24px;
padding: 0 5px;
margin: 6px 6px 0 0;
text-decoration: none;
font-family: verdana;
}
.shortcut {
position: absolute;
display: block;
width: 31px;
height: 31px;
background: #486CB4;
left: 5px;
bottom: 0;
border: 1px solid white;
-webkit-border-radius: 6px;
color: white;
text-shadow: 0 1px 0 black;
display: -webkit-box;
-webkit-box-align: center;
-webkit-box-pack: center;
}
#emotionView{
margin-top: 40px;
height: 165px;
overflow: auto;
}
#emotionView::after {
clear:fix
}
#emotionView .wrap{
margin: 0 auto;
width: 310px!important;
}
#emotionView .list{
list-style: none;
padding: 0;
margin: 0;
border: 1px #DDD solid;
}
#emotionView .list li {
float:left;
border: 1px #DDD solid;
background:white;
border-right:0;
border-bottom:0;
}
#emotionView .list li img {
width:50px;
height:50px;
}
</style>

</head>


<body>
<div class="comm-tag" style="margin-left:10px;">
<a href="/main?udid=${udid}">首页</a>
<a href="/channel?udid=${udid}">全部频道</a> 
<#if channel ??>
<a href="/channel/exit?udid=${udid}&channel_name=${channel.name}">退出频道</a> 
<a href="/channel/users?udid=${udid}&channel_name=${channel.name}">用户列表 (${channel.userCount})</a>
</#if>
</div>
<#if info ??>
<span style="color:blue;">${info}</span> <br/>
</#if>
<#if error ??>
<span style="color:red;">${error}</span><br />
</#if>
<hr />

<div id="chatPanel">
	<div id="chatView"></div>
</div>
<div id="chatActions">
	<a class="shortcut">^_^</a>
	<input type="text" name="message" class="chatInput" id="chatInput" maxlength="500"/>
	<a class="chatSend" href="javascript:void(0);">
		<b>发送</b>
	</a>
</div>
<div id="emotionView" style="display:none;">
	<div class="wrap">
		<ul class="list"></ul>
	</div>
</div>

<script id="packs-zepto">
(function(a){String.prototype.trim===a&&(String.prototype.trim=function(){return this.replace(/^\s+/,"").replace(/\s+$/,"")}),Array.prototype.reduce===a&&(Array.prototype.reduce=function(b){if(this===void 0||this===null)throw new TypeError;var c=Object(this),d=c.length>>>0,e=0,f;if(typeof b!="function")throw new TypeError;if(d==0&&arguments.length==1)throw new TypeError;if(arguments.length>=2)f=arguments[1];else do{if(e in c){f=c[e++];break}if(++e>=d)throw new TypeError}while(!0);while(e<d)e in c&&(f=b.call(a,f,c[e],e,c)),e++;return f})})();var Zepto=function(){function A(a){return v.call(a)=="[object Function]"}function B(a){return a instanceof Object}function C(b){var c,d;if(v.call(b)!=="[object Object]")return!1;d=A(b.constructor)&&b.constructor.prototype;if(!d||!hasOwnProperty.call(d,"isPrototypeOf"))return!1;for(c in b);return c===a||hasOwnProperty.call(b,c)}function D(a){return a instanceof Array}function E(a){return typeof a.length=="number"}function F(b){return b.filter(function(b){return b!==a&&b!==null})}function G(a){return a.length>0?[].concat.apply([],a):a}function H(a){return a.replace(/::/g,"/").replace(/([A-Z]+)([A-Z][a-z])/g,"$1_$2").replace(/([a-z\d])([A-Z])/g,"$1_$2").replace(/_/g,"-").toLowerCase()}function I(a){return a in i?i[a]:i[a]=new RegExp("(^|\\s)"+a+"(\\s|$)")}function J(a,b){return typeof b=="number"&&!k[H(a)]?b+"px":b}function K(a){var b,c;return h[a]||(b=g.createElement(a),g.body.appendChild(b),c=j(b,"").getPropertyValue("display"),b.parentNode.removeChild(b),c=="none"&&(c="block"),h[a]=c),h[a]}function L(b,d){return d===a?c(b):c(b).filter(d)}function M(a,b,c,d){return A(b)?b.call(a,c,d):b}function N(a,b,d){var e=a%2?b:b.parentNode;e?e.insertBefore(d,a?a==1?e.firstChild:a==2?b:null:b.nextSibling):c(d).remove()}function O(a,b){b(a);for(var c in a.childNodes)O(a.childNodes[c],b)}var a,b,c,d,e=[],f=e.slice,g=window.document,h={},i={},j=g.defaultView.getComputedStyle,k={"column-count":1,columns:1,"font-weight":1,"line-height":1,opacity:1,"z-index":1,zoom:1},l=/^\s*<(\w+|!)[^>]*>/,m=[1,3,8,9,11],n=["after","prepend","before","append"],o=g.createElement("table"),p=g.createElement("tr"),q={tr:g.createElement("tbody"),tbody:o,thead:o,tfoot:o,td:p,th:p,"*":g.createElement("div")},r=/complete|loaded|interactive/,s=/^\.([\w-]+)$/,t=/^#([\w-]+)$/,u=/^[\w-]+$/,v={}.toString,w={},x,y,z=g.createElement("div");return w.matches=function(a,b){if(!a||a.nodeType!==1)return!1;var c=a.webkitMatchesSelector||a.mozMatchesSelector||a.oMatchesSelector||a.matchesSelector;if(c)return c.call(a,b);var d,e=a.parentNode,f=!e;return f&&(e=z).appendChild(a),d=~w.qsa(e,b).indexOf(a),f&&z.removeChild(a),d},x=function(a){return a.replace(/-+(.)?/g,function(a,b){return b?b.toUpperCase():""})},y=function(a){return a.filter(function(b,c){return a.indexOf(b)==c})},w.fragment=function(b,d){d===a&&(d=l.test(b)&&RegExp.$1),d in q||(d="*");var e=q[d];return e.innerHTML=""+b,c.each(f.call(e.childNodes),function(){e.removeChild(this)})},w.Z=function(a,b){return a=a||[],a.__proto__=arguments.callee.prototype,a.selector=b||"",a},w.isZ=function(a){return a instanceof w.Z},w.init=function(b,d){if(!b)return w.Z();if(A(b))return c(g).ready(b);if(w.isZ(b))return b;var e;if(D(b))e=F(b);else if(C(b))e=[c.extend({},b)],b=null;else if(m.indexOf(b.nodeType)>=0||b===window)e=[b],b=null;else if(l.test(b))e=w.fragment(b.trim(),RegExp.$1),b=null;else{if(d!==a)return c(d).find(b);e=w.qsa(g,b)}return w.Z(e,b)},c=function(a,b){return w.init(a,b)},c.extend=function(c){return f.call(arguments,1).forEach(function(d){for(b in d)d[b]!==a&&(c[b]=d[b])}),c},w.qsa=function(a,b){var c;return a===g&&t.test(b)?(c=a.getElementById(RegExp.$1))?[c]:e:a.nodeType!==1&&a.nodeType!==9?e:f.call(s.test(b)?a.getElementsByClassName(RegExp.$1):u.test(b)?a.getElementsByTagName(b):a.querySelectorAll(b))},c.isFunction=A,c.isObject=B,c.isArray=D,c.isPlainObject=C,c.inArray=function(a,b,c){return e.indexOf.call(b,a,c)},c.trim=function(a){return a.trim()},c.uuid=0,c.map=function(a,b){var c,d=[],e,f;if(E(a))for(e=0;e<a.length;e++)c=b(a[e],e),c!=null&&d.push(c);else for(f in a)c=b(a[f],f),c!=null&&d.push(c);return G(d)},c.each=function(a,b){var c,d;if(E(a)){for(c=0;c<a.length;c++)if(b.call(a[c],c,a[c])===!1)return a}else for(d in a)if(b.call(a[d],d,a[d])===!1)return a;return a},c.fn={forEach:e.forEach,reduce:e.reduce,push:e.push,indexOf:e.indexOf,concat:e.concat,map:function(a){return c.map(this,function(b,c){return a.call(b,c,b)})},slice:function(){return c(f.apply(this,arguments))},ready:function(a){return r.test(g.readyState)?a(c):g.addEventListener("DOMContentLoaded",function(){a(c)},!1),this},get:function(b){return b===a?f.call(this):this[b]},toArray:function(){return this.get()},size:function(){return this.length},remove:function(){return this.each(function(){this.parentNode!=null&&this.parentNode.removeChild(this)})},each:function(a){return this.forEach(function(b,c){a.call(b,c,b)}),this},filter:function(a){return c([].filter.call(this,function(b){return w.matches(b,a)}))},add:function(a,b){return c(y(this.concat(c(a,b))))},is:function(a){return this.length>0&&w.matches(this[0],a)},not:function(b){var d=[];if(A(b)&&b.call!==a)this.each(function(a){b.call(this,a)||d.push(this)});else{var e=typeof b=="string"?this.filter(b):E(b)&&A(b.item)?f.call(b):c(b);this.forEach(function(a){e.indexOf(a)<0&&d.push(a)})}return c(d)},eq:function(a){return a===-1?this.slice(a):this.slice(a,+a+1)},first:function(){var a=this[0];return a&&!B(a)?a:c(a)},last:function(){var a=this[this.length-1];return a&&!B(a)?a:c(a)},find:function(a){var b;return this.length==1?b=w.qsa(this[0],a):b=this.map(function(){return w.qsa(this,a)}),c(b)},closest:function(a,b){var d=this[0];while(d&&!w.matches(d,a))d=d!==b&&d!==g&&d.parentNode;return c(d)},parents:function(a){var b=[],d=this;while(d.length>0)d=c.map(d,function(a){if((a=a.parentNode)&&a!==g&&b.indexOf(a)<0)return b.push(a),a});return L(b,a)},parent:function(a){return L(y(this.pluck("parentNode")),a)},children:function(a){return L(this.map(function(){return f.call(this.children)}),a)},siblings:function(a){return L(this.map(function(a,b){return f.call(b.parentNode.children).filter(function(a){return a!==b})}),a)},empty:function(){return this.each(function(){this.innerHTML=""})},pluck:function(a){return this.map(function(){return this[a]})},show:function(){return this.each(function(){this.style.display=="none"&&(this.style.display=null),j(this,"").getPropertyValue("display")=="none"&&(this.style.display=K(this.nodeName))})},replaceWith:function(a){return this.before(a).remove()},wrap:function(a){return this.each(function(){c(this).wrapAll(c(a)[0].cloneNode(!1))})},wrapAll:function(a){return this[0]&&(c(this[0]).before(a=c(a)),a.append(this)),this},unwrap:function(){return this.parent().each(function(){c(this).replaceWith(c(this).children())}),this},clone:function(){return c(this.map(function(){return this.cloneNode(!0)}))},hide:function(){return this.css("display","none")},toggle:function(b){return(b===a?this.css("display")=="none":b)?this.show():this.hide()},prev:function(){return c(this.pluck("previousElementSibling"))},next:function(){return c(this.pluck("nextElementSibling"))},html:function(b){return b===a?this.length>0?this[0].innerHTML:null:this.each(function(a){var d=this.innerHTML;c(this).empty().append(M(this,b,a,d))})},text:function(b){return b===a?this.length>0?this[0].textContent:null:this.each(function(){this.textContent=b})},attr:function(c,d){var e;return typeof c=="string"&&d===a?this.length==0||this[0].nodeType!==1?a:c=="value"&&this[0].nodeName=="INPUT"?this.val():!(e=this[0].getAttribute(c))&&c in this[0]?this[0][c]:e:this.each(function(a){if(this.nodeType!==1)return;if(B(c))for(b in c)this.setAttribute(b,c[b]);else this.setAttribute(c,M(this,d,a,this.getAttribute(c)))})},removeAttr:function(a){return this.each(function(){this.nodeType===1&&this.removeAttribute(a)})},prop:function(b,c){return c===a?this[0]?this[0][b]:a:this.each(function(a){this[b]=M(this,c,a,this[b])})},data:function(b,c){var d=this.attr("data-"+H(b),c);return d!==null?d:a},val:function(b){return b===a?this.length>0?this[0].value:a:this.each(function(a){this.value=M(this,b,a,this.value)})},offset:function(){if(this.length==0)return null;var a=this[0].getBoundingClientRect();return{left:a.left+window.pageXOffset,top:a.top+window.pageYOffset,width:a.width,height:a.height}},css:function(c,d){if(d===a&&typeof c=="string")return this.length==0?a:this[0].style[x(c)]||j(this[0],"").getPropertyValue(c);var e="";for(b in c)typeof c[b]=="string"&&c[b]==""?this.each(function(){this.style.removeProperty(H(b))}):e+=H(b)+":"+J(b,c[b])+";";return typeof c=="string"&&(d==""?this.each(function(){this.style.removeProperty(H(c))}):e=H(c)+":"+J(c,d)),this.each(function(){this.style.cssText+=";"+e})},index:function(a){return a?this.indexOf(c(a)[0]):this.parent().children().indexOf(this[0])},hasClass:function(a){return this.length<1?!1:I(a).test(this[0].className)},addClass:function(a){return this.each(function(b){d=[];var e=this.className,f=M(this,a,b,e);f.split(/\s+/g).forEach(function(a){c(this).hasClass(a)||d.push(a)},this),d.length&&(this.className+=(e?" ":"")+d.join(" "))})},removeClass:function(b){return this.each(function(c){if(b===a)return this.className="";d=this.className,M(this,b,c,d).split(/\s+/g).forEach(function(a){d=d.replace(I(a)," ")}),this.className=d.trim()})},toggleClass:function(b,d){return this.each(function(e){var f=M(this,b,e,this.className);(d===a?!c(this).hasClass(f):d)?c(this).addClass(f):c(this).removeClass(f)})}},["width","height"].forEach(function(b){c.fn[b]=function(d){var e,f=b.replace(/./,function(a){return a[0].toUpperCase()});return d===a?this[0]==window?window["inner"+f]:this[0]==g?g.documentElement["offset"+f]:(e=this.offset())&&e[b]:this.each(function(a){var e=c(this);e.css(b,M(this,d,a,e[b]()))})}}),n.forEach(function(a,b){c.fn[a]=function(){var a=c.map(arguments,function(a){return B(a)?a:w.fragment(a)});if(a.length<1)return this;var d=this.length,e=d>1,f=b<2;return this.each(function(c,g){for(var h=0;h<a.length;h++){var i=a[f?a.length-h-1:h];O(i,function(a){a.nodeName!=null&&a.nodeName.toUpperCase()==="SCRIPT"&&(!a.type||a.type==="text/javascript")&&window.eval.call(window,a.innerHTML)}),e&&c<d-1&&(i=i.cloneNode(!0)),N(b,g,i)}})},c.fn[b%2?a+"To":"insert"+(b?"Before":"After")]=function(b){return c(b)[a](this),this}}),w.Z.prototype=c.fn,w.camelize=x,w.uniq=y,c.zepto=w,c}();window.Zepto=Zepto,"$"in window||(window.$=Zepto),function(a){function f(a){return a._zid||(a._zid=d++)}function g(a,b,d,e){b=h(b);if(b.ns)var g=i(b.ns);return(c[f(a)]||[]).filter(function(a){return a&&(!b.e||a.e==b.e)&&(!b.ns||g.test(a.ns))&&(!d||f(a.fn)===f(d))&&(!e||a.sel==e)})}function h(a){var b=(""+a).split(".");return{e:b[0],ns:b.slice(1).sort().join(" ")}}function i(a){return new RegExp("(?:^| )"+a.replace(" "," .* ?")+"(?: |$)")}function j(b,c,d){a.isObject(b)?a.each(b,d):b.split(/\s/).forEach(function(a){d(a,c)})}function k(b,d,e,g,i,k){k=!!k;var l=f(b),m=c[l]||(c[l]=[]);j(d,e,function(c,d){var e=i&&i(d,c),f=e||d,j=function(a){var c=f.apply(b,[a].concat(a.data));return c===!1&&a.preventDefault(),c},l=a.extend(h(c),{fn:d,proxy:j,sel:g,del:e,i:m.length});m.push(l),b.addEventListener(l.e,j,k)})}function l(a,b,d,e){var h=f(a);j(b||"",d,function(b,d){g(a,b,d,e).forEach(function(b){delete c[h][b.i],a.removeEventListener(b.e,b.proxy,!1)})})}function p(b){var c=a.extend({originalEvent:b},b);return a.each(o,function(a,d){c[a]=function(){return this[d]=m,b[a].apply(b,arguments)},c[d]=n}),c}function q(a){if(!("defaultPrevented"in a)){a.defaultPrevented=!1;var b=a.preventDefault;a.preventDefault=function(){this.defaultPrevented=!0,b.call(this)}}}var b=a.zepto.qsa,c={},d=1,e={};e.click=e.mousedown=e.mouseup=e.mousemove="MouseEvents",a.event={add:k,remove:l},a.proxy=function(b,c){if(a.isFunction(b)){var d=function(){return b.apply(c,arguments)};return d._zid=f(b),d}if(typeof c=="string")return a.proxy(b[c],b);throw new TypeError("expected function")},a.fn.bind=function(a,b){return this.each(function(){k(this,a,b)})},a.fn.unbind=function(a,b){return this.each(function(){l(this,a,b)})},a.fn.one=function(a,b){return this.each(function(c,d){k(this,a,b,null,function(a,b){return function(){var c=a.apply(d,arguments);return l(d,b,a),c}})})};var m=function(){return!0},n=function(){return!1},o={preventDefault:"isDefaultPrevented",stopImmediatePropagation:"isImmediatePropagationStopped",stopPropagation:"isPropagationStopped"};a.fn.delegate=function(b,c,d){var e=!1;if(c=="blur"||c=="focus")a.iswebkit?c=c=="blur"?"focusout":c=="focus"?"focusin":c:e=!0;return this.each(function(f,g){k(g,c,d,b,function(c){return function(d){var e,f=a(d.target).closest(b,g).get(0);if(f)return e=a.extend(p(d),{currentTarget:f,liveFired:g}),c.apply(f,[e].concat([].slice.call(arguments,1)))}},e)})},a.fn.undelegate=function(a,b,c){return this.each(function(){l(this,b,c,a)})},a.fn.live=function(b,c){return a(document.body).delegate(this.selector,b,c),this},a.fn.die=function(b,c){return a(document.body).undelegate(this.selector,b,c),this},a.fn.on=function(b,c,d){return c==undefined||a.isFunction(c)?this.bind(b,c):this.delegate(c,b,d)},a.fn.off=function(b,c,d){return c==undefined||a.isFunction(c)?this.unbind(b,c):this.undelegate(c,b,d)},a.fn.trigger=function(b,c){return typeof b=="string"&&(b=a.Event(b)),q(b),b.data=c,this.each(function(){"dispatchEvent"in this&&this.dispatchEvent(b)})},a.fn.triggerHandler=function(b,c){var d,e;return this.each(function(f,h){d=p(typeof b=="string"?a.Event(b):b),d.data=c,d.target=h,a.each(g(h,b.type||b),function(a,b){e=b.proxy(d);if(d.isImmediatePropagationStopped())return!1})}),e},"focusin focusout load resize scroll unload click dblclick mousedown mouseup mousemove mouseover mouseout change select keydown keypress keyup error".split(" ").forEach(function(b){a.fn[b]=function(a){return this.bind(b,a)}}),["focus","blur"].forEach(function(b){a.fn[b]=function(a){if(a)this.bind(b,a);else if(this.length)try{this.get(0)[b]()}catch(c){}return this}}),a.Event=function(a,b){var c=document.createEvent(e[a]||"Events"),d=!0;if(b)for(var f in b)f=="bubbles"?d=!!b[f]:c[f]=b[f];return c.initEvent(a,d,!0,null,null,null,null,null,null,null,null,null,null,null,null),c}}(Zepto),function(a){function b(a){var b=this.os={},c=this.browser={},d=a.match(/WebKit\/([\d.]+)/),e=a.match(/(Android)\s+([\d.]+)/),f=a.match(/(iPad).*OS\s([\d_]+)/),g=!f&&a.match(/(iPhone\sOS)\s([\d_]+)/),h=a.match(/(webOS|hpwOS)[\s\/]([\d.]+)/),i=h&&a.match(/TouchPad/),j=a.match(/Kindle\/([\d.]+)/),k=a.match(/Silk\/([\d._]+)/),l=a.match(/(BlackBerry).*Version\/([\d.]+)/);if(c.webkit=!!d)c.version=d[1];e&&(b.android=!0,b.version=e[2]),g&&(b.ios=b.iphone=!0,b.version=g[2].replace(/_/g,".")),f&&(b.ios=b.ipad=!0,b.version=f[2].replace(/_/g,".")),h&&(b.webos=!0,b.version=h[2]),i&&(b.touchpad=!0),l&&(b.blackberry=!0,b.version=l[2]),j&&(b.kindle=!0,b.version=j[1]),k&&(c.silk=!0,c.version=k[1]),!k&&b.android&&a.match(/Kindle Fire/)&&(c.silk=!0)}b.call(a,navigator.userAgent),a.__detect=b}(Zepto),function(a,b){function l(a){return a.toLowerCase()}function m(a){return d?d+a:l(a)}var c="",d,e,f,g={Webkit:"webkit",Moz:"",O:"o",ms:"MS"},h=window.document,i=h.createElement("div"),j=/^((translate|rotate|scale)(X|Y|Z|3d)?|matrix(3d)?|perspective|skew(X|Y)?)$/i,k={};a.each(g,function(a,e){if(i.style[a+"TransitionProperty"]!==b)return c="-"+l(a)+"-",d=e,!1}),k[c+"transition-property"]=k[c+"transition-duration"]=k[c+"transition-timing-function"]=k[c+"animation-name"]=k[c+"animation-duration"]="",a.fx={off:d===b&&i.style.transitionProperty===b,cssPrefix:c,transitionEnd:m("TransitionEnd"),animationEnd:m("AnimationEnd")},a.fn.animate=function(b,c,d,e){return a.isObject(c)&&(d=c.easing,e=c.complete,c=c.duration),c&&(c/=1e3),this.anim(b,c,d,e)},a.fn.anim=function(d,e,f,g){var h,i={},l,m=this,n,o=a.fx.transitionEnd;e===b&&(e=.4),a.fx.off&&(e=0);if(typeof d=="string")i[c+"animation-name"]=d,i[c+"animation-duration"]=e+"s",o=a.fx.animationEnd;else{for(l in d)j.test(l)?(h||(h=[]),h.push(l+"("+d[l]+")")):i[l]=d[l];h&&(i[c+"transform"]=h.join(" ")),!a.fx.off&&typeof d=="object"&&(i[c+"transition-property"]=Object.keys(d).join(", "),i[c+"transition-duration"]=e+"s",i[c+"transition-timing-function"]=f||"linear")}return n=function(b){if(typeof b!="undefined"){if(b.target!==b.currentTarget)return;a(b.target).unbind(o,arguments.callee)}a(this).css(k),g&&g.call(this)},e>0&&this.bind(o,n),setTimeout(function(){m.css(i),e<=0&&setTimeout(function(){m.each(function(){n.call(this)})},0)},0),this},i=null}(Zepto),function($){function triggerAndReturn(a,b,c){var d=$.Event(b);return $(a).trigger(d,c),!d.defaultPrevented}function triggerGlobal(a,b,c,d){if(a.global)return triggerAndReturn(b||document,c,d)}function ajaxStart(a){a.global&&$.active++===0&&triggerGlobal(a,null,"ajaxStart")}function ajaxStop(a){a.global&&!--$.active&&triggerGlobal(a,null,"ajaxStop")}function ajaxBeforeSend(a,b){var c=b.context;if(b.beforeSend.call(c,a,b)===!1||triggerGlobal(b,c,"ajaxBeforeSend",[a,b])===!1)return!1;triggerGlobal(b,c,"ajaxSend",[a,b])}function ajaxSuccess(a,b,c){var d=c.context,e="success";c.success.call(d,a,e,b),triggerGlobal(c,d,"ajaxSuccess",[b,c,a]),ajaxComplete(e,b,c)}function ajaxError(a,b,c,d){var e=d.context;d.error.call(e,c,b,a),triggerGlobal(d,e,"ajaxError",[c,d,a]),ajaxComplete(b,c,d)}function ajaxComplete(a,b,c){var d=c.context;c.complete.call(d,b,a),triggerGlobal(c,d,"ajaxComplete",[b,c]),ajaxStop(c)}function empty(){}function mimeToDataType(a){return a&&(a==htmlType?"html":a==jsonType?"json":scriptTypeRE.test(a)?"script":xmlTypeRE.test(a)&&"xml")||"text"}function appendQuery(a,b){return(a+"&"+b).replace(/[&?]{1,2}/,"?")}function serializeData(a){isObject(a.data)&&(a.data=$.param(a.data)),a.data&&(!a.type||a.type.toUpperCase()=="GET")&&(a.url=appendQuery(a.url,a.data))}function serialize(a,b,c,d){var e=$.isArray(b);$.each(b,function(b,f){d&&(b=c?d:d+"["+(e?"":b)+"]"),!d&&e?a.add(f.name,f.value):(c?$.isArray(f):isObject(f))?serialize(a,f,c,b):a.add(b,f)})}var jsonpID=0,isObject=$.isObject,document=window.document,key,name,rscript=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,scriptTypeRE=/^(?:text|application)\/javascript/i,xmlTypeRE=/^(?:text|application)\/xml/i,jsonType="application/json",htmlType="text/html",blankRE=/^\s*$/;$.active=0,$.ajaxJSONP=function(a){var b="jsonp"+ ++jsonpID,c=document.createElement("script"),d=function(){$(c).remove(),b in window&&(window[b]=empty),ajaxComplete("abort",e,a)},e={abort:d},f;return a.error&&(c.onerror=function(){e.abort(),a.error()}),window[b]=function(d){clearTimeout(f),$(c).remove(),delete window[b],ajaxSuccess(d,e,a)},serializeData(a),c.src=a.url.replace(/=\?/,"="+b),$("head").append(c),a.timeout>0&&(f=setTimeout(function(){e.abort(),ajaxComplete("timeout",e,a)},a.timeout)),e},$.ajaxSettings={type:"GET",beforeSend:empty,success:empty,error:empty,complete:empty,context:null,global:!0,xhr:function(){return new window.XMLHttpRequest},accepts:{script:"text/javascript, application/javascript",json:jsonType,xml:"application/xml, text/xml",html:htmlType,text:"text/plain"},crossDomain:!1,timeout:0},$.ajax=function(options){var settings=$.extend({},options||{});for(key in $.ajaxSettings)settings[key]===undefined&&(settings[key]=$.ajaxSettings[key]);ajaxStart(settings),settings.crossDomain||(settings.crossDomain=/^([\w-]+:)?\/\/([^\/]+)/.test(settings.url)&&RegExp.$2!=window.location.host);var dataType=settings.dataType,hasPlaceholder=/=\?/.test(settings.url);if(dataType=="jsonp"||hasPlaceholder)return hasPlaceholder||(settings.url=appendQuery(settings.url,"callback=?")),$.ajaxJSONP(settings);settings.url||(settings.url=window.location.toString()),serializeData(settings);var mime=settings.accepts[dataType],baseHeaders={},protocol=/^([\w-]+:)\/\//.test(settings.url)?RegExp.$1:window.location.protocol,xhr=$.ajaxSettings.xhr(),abortTimeout;settings.crossDomain||(baseHeaders["X-Requested-With"]="XMLHttpRequest"),mime&&(baseHeaders.Accept=mime,mime.indexOf(",")>-1&&(mime=mime.split(",",2)[0]),xhr.overrideMimeType&&xhr.overrideMimeType(mime));if(settings.contentType||settings.data&&settings.type.toUpperCase()!="GET")baseHeaders["Content-Type"]=settings.contentType||"application/x-www-form-urlencoded";settings.headers=$.extend(baseHeaders,settings.headers||{}),xhr.onreadystatechange=function(){if(xhr.readyState==4){clearTimeout(abortTimeout);var result,error=!1;if(xhr.status>=200&&xhr.status<300||xhr.status==304||xhr.status==0&&protocol=="file:"){dataType=dataType||mimeToDataType(xhr.getResponseHeader("content-type")),result=xhr.responseText;try{dataType=="script"?(1,eval)(result):dataType=="xml"?result=xhr.responseXML:dataType=="json"&&(result=blankRE.test(result)?null:JSON.parse(result))}catch(e){error=e}error?ajaxError(error,"parsererror",xhr,settings):ajaxSuccess(result,xhr,settings)}else ajaxError(null,"error",xhr,settings)}};var async="async"in settings?settings.async:!0;xhr.open(settings.type,settings.url,async);for(name in settings.headers)xhr.setRequestHeader(name,settings.headers[name]);return ajaxBeforeSend(xhr,settings)===!1?(xhr.abort(),!1):(settings.timeout>0&&(abortTimeout=setTimeout(function(){xhr.onreadystatechange=empty,xhr.abort(),ajaxError(null,"timeout",xhr,settings)},settings.timeout)),xhr.send(settings.data?settings.data:null),xhr)},$.get=function(a,b){return $.ajax({url:a,success:b})},$.post=function(a,b,c,d){return $.isFunction(b)&&(d=d||c,c=b,b=null),$.ajax({type:"POST",url:a,data:b,success:c,dataType:d})},$.getJSON=function(a,b){return $.ajax({url:a,success:b,dataType:"json"})},$.fn.load=function(a,b){if(!this.length)return this;var c=this,d=a.split(/\s/),e;return d.length>1&&(a=d[0],e=d[1]),$.get(a,function(a){c.html(e?$(document.createElement("div")).html(a.replace(rscript,"")).find(e).html():a),b&&b.call(c)}),this};var escape=encodeURIComponent;$.param=function(a,b){var c=[];return c.add=function(a,b){this.push(escape(a)+"="+escape(b))},serialize(c,a,b),c.join("&").replace("%20","+")}}(Zepto),function(a){a.fn.serializeArray=function(){var b=[],c;return a(Array.prototype.slice.call(this.get(0).elements)).each(function(){c=a(this);var d=c.attr("type");this.nodeName.toLowerCase()!="fieldset"&&!this.disabled&&d!="submit"&&d!="reset"&&d!="button"&&(d!="radio"&&d!="checkbox"||this.checked)&&b.push({name:c.attr("name"),value:c.val()})}),b},a.fn.serialize=function(){var a=[];return this.serializeArray().forEach(function(b){a.push(encodeURIComponent(b.name)+"="+encodeURIComponent(b.value))}),a.join("&")},a.fn.submit=function(b){if(b)this.bind("submit",b);else if(this.length){var c=a.Event("submit");this.eq(0).trigger(c),c.defaultPrevented||this.get(0).submit()}return this}}(Zepto),function(a){function d(a){return"tagName"in a?a:a.parentNode}function e(a,b,c,d){var e=Math.abs(a-b),f=Math.abs(c-d);return e>=f?a-b>0?"Left":"Right":c-d>0?"Up":"Down"}function h(){g=null,b.last&&(b.el.trigger("longTap"),b={})}function i(){g&&clearTimeout(g),g=null}var b={},c,f=750,g;a(document).ready(function(){var j,k;a(document.body).bind("touchstart",function(e){j=Date.now(),k=j-(b.last||j),b.el=a(d(e.touches[0].target)),c&&clearTimeout(c),b.x1=e.touches[0].pageX,b.y1=e.touches[0].pageY,k>0&&k<=250&&(b.isDoubleTap=!0),b.last=j,g=setTimeout(h,f)}).bind("touchmove",function(a){i(),b.x2=a.touches[0].pageX,b.y2=a.touches[0].pageY}).bind("touchend",function(a){i(),b.isDoubleTap?(b.el.trigger("doubleTap"),b={}):b.x2&&Math.abs(b.x1-b.x2)>30||b.y2&&Math.abs(b.y1-b.y2)>30?(b.el.trigger("swipe")&&b.el.trigger("swipe"+e(b.x1,b.x2,b.y1,b.y2)),b={}):"last"in b&&(b.el.trigger("tap"),c=setTimeout(function(){c=null,b.el.trigger("singleTap"),b={}},250))}).bind("touchcancel",function(){c&&clearTimeout(c),g&&clearTimeout(g),g=c=null,b={}})}),["swipe","swipeLeft","swipeRight","swipeUp","swipeDown","doubleTap","tap","singleTap","longTap"].forEach(function(b){a.fn[b]=function(a){return this.bind(b,a)}})}(Zepto);
</script>

<script>
$(function() {
	var exports = window;
	//请求所需参数
	var config = {
		<#if channel ??>
		channel_name: '${channel.name}',
		<#else>
		friend: '${friend}',
		</#if>
		udid: '${udid}'
	};
	
	//当前用户对象
	var user = {
		name: '${user.name}'
	}
	
	//当前服务器时间
	var serverTime = ${serverTime?c};
	
	//处理客户端时间差异
	var differTime = serverTime - (+new Date);
	
	//可视化节点
	var chatPanel = $("#chatPanel");
	var chatView = $("#chatView");
	var chatAction = $("#chatActions");
	var emotionView = $("#emotionView");
	
	//消息输入框
	var chatInput = $("#chatInput");
	
	//页面可视区域高度和宽度
	var clientH, clientW;
	
	//头部和底部占据的高度
	var toolbarH = 90;
	
	//存放聊天消息 => id, title, content, status, time
	var chats = [];
	
	//聊天消息索引，为了提高索引消息效率
	var chatsIdx = {};
	
	//消息的几个状态
	var chatMsgStatus = {
		success: 0,   //成功
		failure: 1,  //失败
		sending: 2,   //发送中
		retry: 3      //重试
	}
	
	var hasTouch = 'ontouchstart' in window;
	var touchstart = hasTouch? 'touchstart': 'mousedown';
	var touchmove = hasTouch? 'touchmove': 'mousemove';
	var touchend = hasTouch? 'touchend': 'mouseup';
	var _chatView = chatView[0];
	var chatPanelH = 0;
	//消息的总高度
	var chatViewH = 0;
	//表情操作区域高度
	var emotionViewH = 0;
	//用户在滚动查看历史消息
	var userScrolled = false;
	
	//消息发送状态的字体颜色，和状态对应
	var chatMsgColors = ['black', 'red', '#ccc', '#ccc'];
	
	// ener the channel - then showed
    $.ajax({
        url: '/api/showedMessage',
        method: 'post',
        data: config
    });

	//保存消息
	function saveChat(chat, chatNo) {
		//通过消息id索引到消息数组的下标
		if (chatNo && (chat.status != chatMsgStatus.sending)) {
			if (chat.status == chatMsgStatus.success) {
				if (chat.id) {
					chats[chatsIdx[chatNo]] = chat;
					chatsIdx[chat.id] = chatsIdx[chatNo];
					delete chatsIdx[chatNo];
					
					chat.rendered = chatNo;
				}
			} else {
				chats[chatsIdx[chatNo]] = chat;
				chat.rendered = chatNo;
			}
		} else {
			chats.push(chat);
			chatsIdx[chat.id||chatNo] = chats.length - 1;
		}
	}
	
	//获取最近的历史消息
	function getRecentMessages() {
		$.ajax({
			url: '/api/getRecentMessages',
			data: config,
			dataType: 'json',
			success: function(data) {
				if (data) {
					var chat;
					for (var i=0, len=data.length; i<len; i++) {
						chat = data[i];
						chat.status = chatMsgStatus.success;
						saveChat(chat);
					}
				}
			}
		});
	}
	//滚动消息置底
	function focusMessage() {
		if (!userScrolled) {
			var maxY = chatPanelH - chatViewH;
			if (maxY > 0) {
				maxY = 0;
			}
			_chatView.style.webkitTransitionTimingFunction = "ease-out";
			_chatView.style.webkitTransitionDuration = "200ms";
			_chatView.style.webkitTransform = "translate3d(0, "+maxY+"px, 0)";
		}
	}
	//接受消息
	function receivedMessage(msg) {
		if (msg) {
			msg = JSON.parse(msg);
			if (config.channel_name && config.channel_name != msg.extras.channel) {
				return;
			} else if (config.friend && config.friend != msg.title) {
				return;
			}
			
			if (msg.title!=user.name) {
				var chat = {
					id: msg.extras.sendNo,
					title: msg.title,
					content: msg.message,
					channel: msg.extras.channel,
					status: chatMsgStatus.success,
					time: differTime + (+new Date)
				}
				saveChat(chat);
				
				//反馈服务器客户端收到了推送消息
				$.ajax({
					url: '/api/showedMessage',
					method: 'post',
					data: config
				});
			}
		}
	}
	exports.receivedMessage = receivedMessage;
	
	//API 2.0 可以支持任意特殊符号。代码中不需要对特殊符号做转义。
	function encodeMessageSpecials(message) {
		return message.replace(/;/g, "%3B").replace(/</g, '&lt%3B').replace(/>/g, '&gt%3B');
	}
	
	//转换特殊字符
	function decodeMessageSpecials(message) {
		return decodeURIComponent(message);
	}
	//发送消息
	function sendChat() {
		var message = chatInput.val();
		if (message == '') {
			return;
		}
		var chatNo = 'u-' + ((+new Date)+'').substring(8);
		var chatData = {
			message:message,
			chatNo: chatNo
		};
		$.extend(chatData, config);
		chatInput.val('');
		
		var chat = {
			id: chatData.chatNo,
			title: user.name,
			content: chatData.message,
			status: chatMsgStatus.sending,
			time: differTime + (+new Date)
		};
		saveChat(chat);
		$.ajax({
			url: "/api/talk",
			method: "post",
			data: chatData,
			dataType: 'json',
			success: function(data) {
				if (data) {
					if (data.error) {
						//发送失败提示错误信息
						alert( data.error );
						chat.status = chatMsgStatus.failure;
						saveChat(chat, chatNo);
					} else if (data.sent) {
						//保存聊天数据
						data.message.status = chatMsgStatus.success;
						saveChat(data.message, data.chatNo);
					}
				}
			},
			error: function(xhr, errorType, error) {
				chat.status = chatMsgStatus.failure;
				saveChat(chat, chatNo);
			}
		});
	}
	
	//表情列表，
	var emotions = {};
	(function() {
		var url;
		for (var i=10; i<=27; i++) {
			url = 'http://www.eoeandroid.com/static/image/smiley/tutu/'+i+'.gif';
			emotions['_t'+i+'_'] = url;
			//预加载
			//new Image().src = url;
		}
		var ems = [];
		for (var emo in emotions) {
			ems.push('<li><img src="'+emotions[emo]+'"/></li>');
		}
		emotionView.find(".list").html(ems.join(''));
	})();
	
	//处理消息内容
	function replaceSpecials(htmlContent) {
		for (var em in emotions) {
			htmlContent = htmlContent.replace(new RegExp(em, 'g'), '<img class="emotion" src="'+emotions[em]+'"/>');
		}
		return decodeMessageSpecials(htmlContent);
	}
	
	//格式化消息时间
	Date.prototype.format = function(format) { 
		var o = { 
			"M+" : this.getMonth()+1, //month 
			"d+" : this.getDate(),    //day 
			"H+" : this.getHours(),   //hour 
			"m+" : this.getMinutes(), //minute 
			"s+" : this.getSeconds(), //second 
			"q+" : Math.floor((this.getMonth()+3)/3),  //quarter 
			"S" : this.getMilliseconds() //millisecond 
		};
		if(/(y+)/.test(format)) format = format.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length)); 
		for (var k in o) {
			if(new RegExp("("+ k +")").test(format)) { 
				format = format.replace(RegExp.$1, RegExp.$1.length==1 ? o[k] : ("00"+ o[k]).substr((""+ o[k]).length));
			}
		}
		return format; 
	}
	
	//渲染数据到view
	function renderChatView() {
		var htmls = [];
		var chat, style, color, htmlContent, itime;
		for (var i=0, len=chats.length; i<len; i++) {
			chat = chats[i];
			style = chat.title==user.name?"userSelf":"userOther";
			color = chatMsgColors[chat.status];
			if (!chat.rendered) {
				htmlContent = replaceSpecials(chat.content);
				htmls.push('<div style="color:'+color+'" id="'+chat.id+'">');
				htmls.push('<span class="'+style+'">'+chat.title+'</span>');
				htmls.push('(', new Date(chat.time).format("MM/dd HH:mm:ss") ,'):');
				htmls.push('<div class="message">', htmlContent, '</div>');
				htmls.push('</div>');
			} else if (chat.rendered.length) {
				var nodeId = chat.rendered;
				var node = $("#"+nodeId);
				node.css('color', color).attr('id', chat.id).find('label').attr('class', 'userSelf');
			}
			chat.rendered = true;
		}
		if (htmls.length) {
			chatView.append(htmls.join(''));
			
			chatViewH = chatView.height();
			focusMessage();
		}
	}
	
	//获取css3 translate3d的值
	function getTranslate3dVal(el, i) {
		var transform = el.style.webkitTransform;
		if (transform) {
			return parseInt(transform.split(",")[i].trim().replace("px","") || 0);
		}
		return 0;
	}
	//获取第一根手指事件对象
	function getFirstFinger(event) {
		return hasTouch?event.targetTouches[0]:event;
	}
	//给聊天视图区域添加滚动事件
	_chatView.addEventListener(touchstart, function(e) {
		e = getFirstFinger(e);
		var self = this;
		var startY = e.pageY;
		var transY = getTranslate3dVal(this, 1);
		var ctime = +new Date;
		var cy = e.pageY;
		var f = 1.8;//缓动系数
		var onMove = function(e) {
			e.preventDefault();
			e.stopPropagation();
			var maxY = chatViewH - chatPanelH;
			if (maxY > 0) {
				e = getFirstFinger(e);
				var moveY = e.pageY;
				var y = transY + (moveY - startY);
				if (y > 0) {
					y = y/4;
				} else if (maxY < Math.abs(y)) {
					y = -maxY + (maxY + y)/4;
				}
				self.style.webkitTransitionTimingFunction = "linear";
				self.style.webkitTransitionDuration = 0;
				self.style.webkitTransform = "translate3d(0, "+y+"px, 0)";
				
				var now = +new Date;
				if (now - cy > 150) {
					ctime = now;
					cy = e.pageY;
				}
				
				userScrolled = true;
			}
		}
		var onRelease = function(e) {
			e = getFirstFinger(e);
			transY = getTranslate3dVal(self, 1);
			if (transY != 0) {
				var y = transY, time = 0;
				var maxY = chatViewH - chatPanelH;
				if (transY > 0) {
					y = 0;
					time = 300;
				} else if (maxY < Math.abs(transY)) {
					time = 500;
					y = -maxY;
					
					userScrolled = false;
				} else {
					var now = +new Date;
					var diff = now - ctime;
					if (diff <= 150) {
						var moum = cy - startY;
						y += (moum + (Math.ceil(Math.floor(moum / diff) * f)));
						time = 200*f + Math.abs(0.1*y);
						if (y > 0) y = 0;
						if (y < -maxY) y = -maxY;
					}
				}
				self.style.webkitTransitionTimingFunction = "ease-out";
				self.style.webkitTransitionDuration = time+"ms";
				self.style.webkitTransform = "translate3d(0, "+(y)+"px, 0)";
			}
			
			document.removeEventListener(touchmove, onMove);
			document.removeEventListener(touchend, onRelease);
		}
		document.addEventListener(touchmove, onMove, false);
		document.addEventListener(touchend, onRelease, false);
	});
	
	//viewport横屏竖屏重置数据
	function onResize() {
		clientH = $(window).height();
		clientW = $(window).width();
		chatPanelH = clientH - toolbarH - emotionViewH;
		chatViewH = chatView.height();
		chatPanel.height(chatPanelH);
		chatInput.width(clientW - 160);
		chatAction.css("bottom", emotionViewH);
		
		focusMessage();
	}
	
	//每300ms一次渲染
	setInterval(renderChatView, 300);
	
	onResize();
	//页面第一次加载时候拉取最近的聊天记录
	getRecentMessages();
	//注册发送按钮事件
	$(".chatSend").click(sendChat);
	chatInput.keyup(function(e) {
		if (e.keyCode == 13) {
			sendChat();
		}
	});
	chatInput.focus(function() {
		emotionView.hide();
		emotionViewH = 0;
	});
	$(window).resize(onResize);
	$(".shortcut").click(function() {
		emotionView.toggle();
		emotionViewH = emotionViewH == 0? emotionView.height() : 0;
		onResize();
	})
	function findEmotion(idx) {
		var i = 0;
		for (var emo in emotions) {
			if (i == idx) {
				return emo;
			}
			i ++;
		}
	}
	emotionView.find(".list img").each(function(i) {
		$(this).click(function() {
			var pre = chatInput.val();
			pre += findEmotion(i);
			chatInput.val(pre);
		})
	});
});

<#if channelEntered ??>
pushtalk.channelUpdated();
</#if>
</script>
</body>
</html>
